<template>
  <div class="comments-container">
    <el-container style="opacity: 0.9">
      <div class="author">
        <img :src="user.userPic" alt=""
             style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px;cursor: pointer">
        <div>
          <div class="nkname">
            <span class="name" v-if="user.token==null">匿名用户</span>
            <span class="name" v-else>{{ user.nickname }} </span>
          </div>
        </div>
      </div>
      <el-form :model="messageForm" :rules="messageFormRules" ref="messageFormRef" style="width: 800px">
        <el-form-item prop="content">
          <el-input @blur="blur" :rows="5" v-model="messageForm.content" type="textarea" maxlength="100" show-word-limit
                    placeholder="请输入你的评论"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-row>
            <el-col :span="12" style="text-align: left">
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-button type="primary" @click="pushList">点击发表</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-container>
    <el-divider v-if="commentsList.length>0"><span style="color: #999;font-size: small;">最新评论</span></el-divider>
    <div class="comment" v-for="item in commentsList" :key="item.id">
      <div class="info" :id="item.id">
        <img :src="item.userPic" alt=""
             style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px;cursor: pointer">
        <div class="right">
          <div class="name">{{ item.nickname }}</div>
          <div class="date">{{ new Date(item.createTime).toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai', hour12: false}) }}</div>
        </div>
      </div>
      <div class="content">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommentsBlog',
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('user-key' || '{}')),
      blogs: JSON.parse(localStorage.getItem('blog-info' || '{}')),
      messageForm: {
        content: ''
      },
      messageFormRules: {},
      cursorIndexStart: null,//光标选中开始的位置
      cursorIndexEnd: null,//光标选中结束的位置
      commentsList: [],
      pageCommentsReq: {
        pageNum: 1,
        pageSize: 100,
        blogId: '',
      },
      addCommentReq: {
        content: '',
        createUser: '',
        blogId: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 评论发表
    pushList() {
      this.addCommentReq.content = this.messageForm.content
      this.addCommentReq.createUser = this.user.id
      this.addCommentReq.blogId = this.blogs[0].id
      this.$request.post('/comments/addComment', this.addCommentReq).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.fetchData()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message.error("系统错误")
      })
    },
    blur(e) {
      this.cursorIndexStart = e.srcElement.selectionStart  // 获取input输入框失去焦点时光标选中开始的位置
      this.cursorIndexEnd = e.srcElement.selectionEnd  // 获取input输入框失去焦点时光标选中结束的位置
    },
    fetchData() {
      this.pageCommentsReq.blogId = this.blogs[0].id
      this.$request.post('/comments/queryComments', this.pageCommentsReq).then(res => {
        if (res.code === 200) {
          this.commentsList = res.data.comments
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.loading = false;
        this.$message.error("系统错误，请联系管理员")
      })
    },
  }
}
</script>

<style scoped>
.comments-container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 200px;
  margin-bottom: 20px;
}


.nkname {
  margin: 10px;
  max-width: 530px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.comment {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #F2F6FC;
}

.info {
  display: flex;
  align-items: center;
}

.right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 5px;
  font-weight: 500;
}

.date {
  font-size: 12px;
  color: #909399;
}

.content {
  font-size: 16px;
  color: #303133;
  line-height: 20px;
  padding: 10px 0;
}
</style>
